<template>
  <div class="layouts-header">
    <div class="layouts-header-left">
      <el-icon :size="20" @click="permissionStore.toggleExpand"
        ><fold v-if="permissionStore.isExpand" /><expand v-else
      /></el-icon>
    </div>
    <div class="layouts-header-right">
      <search />
      <!-- 日/夜模式 -->
      <my-icon :type="isDark ? 'icon-yejian' : 'icon-rijian'" @click="toggleDark()" />
      <!-- 中英文 -->
      <i class="iconfont icon-zhongyingwen" />
      <!-- 全屏 -->
      <my-icon :type="isFullscreen ? 'icon-quanpingsuoxiao' : 'icon-quanpingxianshi'" @click="enterFullscreen" />
      <!-- 通知 -->
      <my-icon type="icon-icon_notice" />
      <!-- 设置 -->
      <el-popover class="box-item" title="Title" content="Top Left prompts info" placement="top-start">
        <template #reference>
          <my-icon type="icon-set1" />
        </template>
      </el-popover>
      <!-- 用户 -->
      <el-popover class="box-item" title="Title" content="Top Left prompts info" placement="top-start">
        <template #reference>
          <user />
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Expand, Fold, Setting } from '@element-plus/icons-vue';
import { useDark, useToggle } from '@vueuse/core';

import { MyIcon } from '@/icons';
import { usePermissionStore } from '@/store/permission';
import { useSettingStore } from '@/store/settings';

import { useFullscreen } from './hooks/useFullscreen';
import search from './search/index.vue';
import user from './user/index.vue';

const isDark = useDark();
const toggleDark = useToggle(isDark);

const permissionStore = usePermissionStore();
const { isFullscreen, enterFullscreen } = useFullscreen();
const settingStore = useSettingStore();
</script>

<style scoped lang="scss">
.layouts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .layouts-header-left {
    padding-left: 10px;
  }

  .layouts-header-right {
    display: flex;
    align-items: center;
    gap: 15px;

    &:last-child {
      margin-right: 10px;
    }
  }
}
</style>
